<template>
  <div 
    v-if="visible"
    class="task-tooltip"
    :style="style"
  >
    <div class="tooltip-header">
      <h4>{{ task?.name || '未知任务' }}</h4>
      <div class="tooltip-status">
        <el-tag :type="getStatusType(task?.status)" size="small">
          {{ getStatusText(task?.status) }}
        </el-tag>
      </div>
    </div>
    <div class="tooltip-content">
      <div class="tooltip-row">
        <span class="tooltip-label">负责人:</span>
        <span class="tooltip-value">{{ task?.assignee || '未分配' }}</span>
      </div>
      <div class="tooltip-row">
        <span class="tooltip-label">开始时间:</span>
        <span class="tooltip-value">{{ getFormattedDate(task?.startDate) }}</span>
      </div>
      <div class="tooltip-row">
        <span class="tooltip-label">结束时间:</span>
        <span class="tooltip-value">{{ getFormattedDate(task?.endDate) }}</span>
      </div>
      <div class="tooltip-row">
        <span class="tooltip-label">进度:</span>
        <span class="tooltip-value">
          <el-progress 
            :percentage="task?.progress || 0" 
            :stroke-width="8"
            :show-text="false"
          />
          <span class="progress-text">{{ task?.progress || 0 }}%</span>
        </span>
      </div>
      <div class="tooltip-row">
        <span class="tooltip-label">优先级:</span>
        <span class="tooltip-value">
          <el-tag :type="getPriorityType(task?.priority)" size="small">
            {{ getPriorityText(task?.priority) }}
          </el-tag>
        </span>
      </div>
      <div class="tooltip-row" v-if="task?.dependencies && task.dependencies.length > 0">
        <span class="tooltip-label">前置任务:</span>
        <span class="tooltip-value">{{ getDependencyText(task?.dependencies) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import dayjs from 'dayjs'

export default {
  name: 'TaskTooltip',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    task: {
      type: Object,
      default: null
    },
    style: {
      type: Object,
      default: () => ({
        left: '0px',
        top: '0px'
      })
    },
    allTasks: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    // 安全获取dayjs对象
    const getSafeDayjs = (date) => {
      if (!date) return null
      try {
        // 如果已经是dayjs对象
        if (date.format && typeof date.format === 'function' && date.diff && typeof date.diff === 'function') {
          return date
        }
        // 如果是字符串或其他格式，尝试转换为dayjs
        const dayjsDate = dayjs(date)
        if (dayjsDate.isValid()) {
          return dayjsDate
        }
        return null
      } catch (error) {
        console.warn('日期转换失败:', error, date)
        return null
      }
    }
    
    // 安全格式化日期
    const getFormattedDate = (date) => {
      const dayjsDate = getSafeDayjs(date)
      if (!dayjsDate) return '--'
      return dayjsDate.format('MM-DD')
    }
    
    // 优先级相关
    const getPriorityType = (priority) => {
      switch (priority) {
        case 'high': return 'danger'
        case 'medium': return 'warning'
        case 'low': return 'success'
        default: return 'info'
      }
    }
    
    const getPriorityText = (priority) => {
      switch (priority) {
        case 'high': return '高'
        case 'medium': return '中'
        case 'low': return '低'
        default: return '中'
      }
    }
    
    // 状态相关
    const getStatusType = (status) => {
      switch (status) {
        case 'completed': return 'success'
        case 'in-progress': return 'warning'
        case 'pending': return 'info'
        case 'cancelled': return 'danger'
        default: return 'info'
      }
    }
    
    const getStatusText = (status) => {
      switch (status) {
        case 'completed': return '已完成'
        case 'in-progress': return '进行中'
        case 'pending': return '待开始'
        case 'cancelled': return '已取消'
        default: return '待开始'
      }
    }
    
    const getDependencyText = (dependencies) => {
      if (!dependencies || dependencies.length === 0) return '-'
      if (!props.allTasks || props.allTasks.length === 0) return '-'
      return dependencies.map(depId => {
        const depTask = props.allTasks.find(t => t.id === depId)
        return depTask ? depTask.name : depId
      }).join(', ')
    }
    
    return {
      getFormattedDate,
      getPriorityType,
      getPriorityText,
      getStatusType,
      getStatusText,
      getDependencyText
    }
  }
}
</script>

<style scoped>
/* 悬浮提示面板样式 */
.task-tooltip {
  position: absolute;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px;
  min-width: 280px;
  max-width: 320px;
  z-index: 1000;
  pointer-events: none;
  font-size: 12px;
}

.tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.tooltip-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  flex: 1;
}

.tooltip-status {
  margin-left: 8px;
}

.tooltip-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tooltip-label {
  color: #606266;
  font-weight: 500;
  min-width: 60px;
  flex-shrink: 0;
}

.tooltip-value {
  color: #303133;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.progress-text {
  margin-left: 4px;
  font-size: 11px;
  color: #606266;
}

/* 进度条样式调整 */
.tooltip-value .el-progress {
  flex: 1;
  margin-right: 4px;
}

.tooltip-value .el-progress-bar__outer {
  background-color: #f0f0f0;
}

.tooltip-value .el-progress-bar__inner {
  transition: width 0.3s ease;
}
</style> 